<template>
    <div class="page">
        <span class="rem_time" style="color:orange;border-width:1px; border-style:soild:border-color:orange;" @click="gotoPay">
            {{ remaining }}
        </span>
        <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
    </div>
</template>

<script>
import alertTip from './alertTip';

export default {
  data () {
    return {
      countNum: 900,
      showAlert: false,
      alertText: null
    };
  },
  mounted () {
    this.countNum -= this.numTime;
    this.remainingTime();
  },
  props: ['time'],
  components: {
    alertTip
  },
  methods: {
    closeTip () {
      this.$emit('closeTip');
    },
    // 计算时间
    remainingTime () {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.countNum--;
        if (this.countNum === 0) {
          clearInterval(this.timer);
          this.showAlert = true;
          this.alertText = '支付超时';
        }
      }, 1000);
    },
    gotoPay () {
      this.showAlert = true;
      this.alertText = '请前往官方饿了么APP支付';
    }
  },
  computed: {
    // 转换时间成分秒
    remaining: function () {
      let minute = parseInt(this.countNum / 60);
      let second = parseInt(this.countNum % 60);
      if (minute < 10) {
        minute = '0' + minute;
      }
      if (second < 10) {
        second = '0' + second;
      }
      return '去支付（还剩 ' + minute + '分' + second + '秒）';
    },
    // 订单返回时间秒分分别处理
    numTime: function () {
      if (this.time.indexOf('分钟') !== -1) {
        return parseInt(this.time) * 60;
      } else {
        return parseInt(this.time);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../style/mixin';
.page{
    display: inline-block;
    .rem_time{
        @include sc(.55rem, orange);
        padding: .1rem .2rem;
        border-radius: .15rem;
    }
}
</style>
